<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <meta http-equiv="cache-control" content="no-cache">
    <meta http-equiv="pragma" content="no-cache">
    <meta http-equiv="expires" content="0">
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <link rel="shortcut icon" href="../../../static/img/kurento.png" type="image/png" />

    <link rel="stylesheet"
          href="webjars/bootstrap/dist/css/bootstrap.min.css">

    <link rel="stylesheet" href="../../../static/css/view.css">

    <link rel="stylesheet"
          href="webjars/ekko-lightbox/dist/ekko-lightbox.min.css">
    <link rel="stylesheet" href="webjars/demo-console/index.css">
    <link rel="stylesheet" href="../../../static/css/kurento.css">

    <script src="webjars/jquery/dist/jquery.min.js"></script>
    <script src="webjars/bootstrap/dist/js/bootstrap.min.js"></script>
    <script src="webjars/ekko-lightbox/dist/ekko-lightbox.min.js"></script>
    <script src="/webjars/webrtc-adapter/release/adapter.js"></script>
    <script src="webjars/demo-console/index.js"></script>

    <script src="../../../static/js/kurento-utils.js"></script>
    <script src="../../../static/js/index.js"></script>
    <title>播放室</title>










</head>
<body>
<header>
    <div class="navbar navbar-inverse navbar-fixed-top">
        <div class="container">
            <div class="navbar-header">
            </div>
        </div>
    </div>
</header>
<div class="container">
    <div class="page-header">
        <h1>观看直播 </h1>
    </div>
    <div class="row">
        <div class="col-md-5">
            <div class="row">
                <div class="col-md-12">
                    <!--<a id="presenter" href="#" class="btn btn-success"><span-->
                            <!--class="glyphicon glyphicon-play"></span> 开始直播 </a>-->
                    <a
                            id="viewer" href="#" class="btn btn-primary"><span
                            class="glyphicon glyphicon-user"></span> 开始观看</a>

                    <a id="stop"
                       href="#" class="btn btn-danger"><span
                            class="glyphicon glyphicon-stop"></span> 停止观看</a>



                    <a id="fullscreenButton"
                       href="#" class="btn btn-danger"><span
                            class="glyphicon glyphicon-stop"></span> 全屏观看</a>

                </div>

            </div>

            <br /> <label class="control-label" for="console">Console</label><br>
            <br>
            <div id="console" class="democonsole">
                <ul></ul>
            </div>


            <!--输入框和显示内容-->

            <div class="row">
                <br/> <label class="control-label" for="chat_input">输入：</label><br>
                <div class="chat_input">
                    <input type="text" id="chat_input">
                    <input type="button" onclick="send_chat()" value="发送">
                </div>

                 <!--<label class="control-label" for="console">Console_chat</label><br>-->
                <br>

                <!--<div id="console_chat" class="console_chat">-->
                    <!--<ul></ul>-->
                <!--</div>-->


            </div>


        </div>
        <div class="col-md-7">
            <div id="videoBig">
                <video id="video" autoplay width="640px" height="480px"
                       poster="../../../static/img/webrtc.png"></video>
                    <!-- 新增弹幕容器 -->
                    <div id="danmuContainer" style="position: absolute; top: 0; left: 0; width: 100%; height: 100%; pointer-events: none;"></div>
            </div>
        </div>
    </div>
</div>

<footer>
    <div class="foot-fixed-bottom">

    </div>
</footer>

<script>
    var video = document.getElementById('video');
    var fullscreenButton = document.getElementById('fullscreenButton');

    fullscreenButton.addEventListener('click', function() {
        if (video.requestFullscreen) {
            video.requestFullscreen();
        } else if (video.mozRequestFullScreen) {
            video.mozRequestFullScreen();
        } else if (video.webkitRequestFullscreen) {
            video.webkitRequestFullscreen();
        } else if (video.msRequestFullscreen) {
            video.msRequestFullscreen();
        }
    });




    // 在你的index.js文件中添加以下代码
    function createDanmu(text) {
        var danmu = document.createElement('div');
        danmu.className = 'danmu';
        danmu.textContent = text;

        var danmuContainer = document.getElementById('danmuContainer');
        var randomY = Math.floor(Math.random() * (danmuContainer.clientHeight - 20)) + 10;
        danmu.style.top = randomY + 'px';

        danmuContainer.appendChild(danmu);
    }

    function send_chat() {
        var input = document.getElementById('chat_input');
        var text = input.value;
        if (text) {
            createDanmu(text);
            input.value = '';
        }
    }

</script>


</body>
</html>
